<template>
  <div class="breadcrumb-container">
    <el-card class="breadcrumb-card">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">
          <span v-if="index === breadcrumbs.length - 1" class="current">{{ item.meta?.title }}</span>
          <a v-else @click.prevent="handleLink(item)">{{ item.meta?.title }}</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter, RouteLocationMatched } from 'vue-router'

const route = useRoute()
const router = useRouter()
const breadcrumbs = ref<RouteLocationMatched[]>([])

const getBreadcrumb = () => {
  let matched = route.matched.filter(item => item.meta && item.meta.title)
  if (matched.length && matched[0].path !== '/') {
    matched = [{ path: '/', meta: { title: '首页' } } as RouteLocationMatched].concat(matched)
  }
  breadcrumbs.value = matched
}

const handleLink = (item: RouteLocationMatched) => {
  router.push(item.path)
}

watch(
  () => route.path,
  () => getBreadcrumb(),
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.breadcrumb-container {
  margin-bottom: 16px;
  
  .breadcrumb-card {
    background-color: #fff;
    border-radius: 4px;
    
    :deep(.el-card__body) {
      padding: 12px 20px;
    }
    
    .current {
      color: var(--el-text-color-regular);
      font-weight: bold;
    }
  }
}
</style> 